<!DOCTYPE html>

  <head>
    
    <title>jsPDF png test</title>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    
    <script src='js/jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
	<script src='../libs/Blob.js/Blob.js' type='text/javascript'></script>
	<script src='../libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
    
    <script src='../libs/png_support/zlib.js' type='text/javascript'></script>
	<script src='../libs/png_support/png.js' type='text/javascript'></script>
	
	<script src='../libs/Deflate/deflate.js' type='text/javascript'></script>
	
	<script src='../jspdf.js' type='text/javascript'></script>
    <script src='../jspdf.plugin.addimage.js' type='text/javascript'></script>
    <script src='../jspdf.plugin.png_support.js' type='text/javascript'></script>
    
    <style>
		body {
			background-image:url("images/grid.png");
		}
		div {
			min-width: 300px;
			float: left;
			clear: left;
		}
		.img-wrap {
			margin-bottom:20px;
			float: left;
		}
		input[type=button] {
			margin-bottom: 5px;
			float: left;
			clear: left;
		}
	</style>
   	
  </head>
  
  <body>
  
	<script type="text/javascript">
	
		var images = {
			jpg: '',
			colortype_6_rgba_8_bit_png: '',
			colortype_6_rgba_16_bit_png: '',
			colortype_4_grayscale_alpha_8_bit_png: '',
			colortype_4_grayscale_alpha_16_bit_png: '',
			colortype_3_indexed_single_colour_alpha_8_bit_png: '',
			colortype_3_indexed_multi_colour_alpha_8_bit_png: '',
			//colortype_3_indexed_single_colour_alpha_4_bit_png: '',
			//colortype_3_indexed_multi_colour_alpha_4_bit_png: '',	
			colortype_2_rgb_8_bit_png: '',
			colortype_2_rgb_16_bit_png: '',
			colortype_1_grayscale_8_bit_png: ''
		}
		
		var btns = {
			base64: {label:'Generate pdf from base64', compress:'none'},
			img: {label:'Generate pdf from <img> and recompress', compress:'slow'},
			compress_fast: { label: 'Generate pdf from base64 and fast recompress image', compress:'fast'},
			compress_med: { label: 'Generate pdf from base64 and medium recompress image', compress:'medium'},
			compress_slow: { label: 'Generate pdf from base64 and slow recompress image', compress:'slow'}
		}
		
		
		$(document).ready( function() {
			
			$('<div>', {
				id:'container'
			}).appendTo('body');
			
			var select = $('<select>',{
				change: function(evt) {
					displayImage($(this).val());
				}
			}).appendTo('body');
				
			var option,
				img;
			
			for(img in images) {
				
				option = $('<option>',{
					text: img.replace(/_/g, " "),
					value:img,
				}).appendTo(select);
				
			}
			
			displayImage('jpg');
	    });
		
		
		function displayImage(id) {
			
			var container = $('#container').empty();
			
			var imgWrap = $('<div>', {
				class:'img-wrap'
			}).appendTo(container); 
			
			var img = $('<img>', {
				id:id, 
				src:images[id]
			}).appendTo(imgWrap);
			
			var label = id.replace(/_/g, " "),
				format = label.split(" ").pop(),
				btn,
				data;
			
			for(btn in btns) {
				
				if(btn.indexOf('compress') === 0)
					if(id.indexOf("colortype_6") === -1 && id.indexOf("colortype_4") === -1)
						continue;
				
				data = btn === 'img' ? img.get(0) : images[id];
				
				$('<input>', {
					type:'button',
					value: btns[btn].label,
					click: (function(btn, data){
						return function(evt) {
							var type = btn.replace(/_/g, " ")
							createPDFObject(data, label + " " + type, format, btns[btn].compress);
							}
						})(btn, data)
				}).appendTo(container);
			}
		}
		
		function createPDFObject(imgData, type, format, compress) {

			var doc = new jsPDF('p', 'pt', 'a4', false);
	
			doc.setFontSize(40);
			doc.setDrawColor(0);
			doc.setFillColor(238, 238, 238);
			doc.rect(0, 0, 595.28,  841.89, 'F');
			doc.text(35, 100, type);
			doc.addImage(imgData, format, 100, 200, 280, 210, undefined, compress);
			
			doc.save( type + '.pdf')
		}
	
	</script>
	
  </body>
  
</html>